<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>区域汇总分析</title>
    <script type="text/javascript" include="jquery,bootstrap,loader" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090";
    var layer, alertDiv,
            processingUrl = host + "/iserver/services/distributedanalyst/rest/v1/jobs",
            mapURL = host + "/iserver/services/map-world/rest/maps/World",
            token = 'yurnlSeWak-vh77nAh73yrW_cHDTDJrfZxCVl7-h3GhMSMSNTPjvH7ykQviXfH1tOQ2ckJtUt6J9RY32GFNa6Q..',
            map = L.map('map', {
                crs: L.CRS.EPSG4326,
                center: [40.75, -73.95],
                maxZoom: 18,
                zoom: 12
            }),
            info = L.control({position: 'topright'});
    L.supermap.tiledMapLayer(mapURL).addTo(map);

    info.onAdd = function () {
        var popup = L.DomUtil.create('div');
        popup.style.width = '420px';
        popup.innerHTML = "<div class='panel panel-default'>" +
                "<div class='panel-heading'>" +
                "<h3 class='panel-title'>区域汇总分析</h3>" +
                "</div><div class='panel-body'>" +
                "<div class='input-group'>" +
                "<span class='input-group-addon'>输入数据<span title='必填字段' style='color: red;'> * </span>　　　　　</span>" +
                "<input id='datasetName' type='text' class='form-control'value='samples_processing_newyorkZone_R'/>" +
                "</div><p><div class='input-group'>" +
                "<span class='input-group-addon'>汇总类型<span title='必填字段' style='color: red;'> * </span>　　　　　</span> <div>" +
                "<select class='form-control' id='type' name='clientType'>" +
                "<option value='SUMMARYMESH' selected='selected'>网格面汇总</option>" +
                "<option value='SUMMARYREGION'>多边形汇总</option>" +
                "</select></div></div><p>" +
                "<div id='meshTypeS' class='input-group'>" +
                "<span class='input-group-addon'>网格面汇总类型<span title='必填字段' style='color: red;'> * </span>　　</span>" +
                "<select class='form-control' id='meshType' name='clientType'>" +
                "<option value='0' selected='selected'>四边形网格</option>" +
                "<option value='1'>六边形网格</option>" +
                "</select></div><p>" +
                "<div id='regionDatasetS'' class='input-group'>" +
                "<span class='input-group-addon'>汇总数据集<span title='必填字段' style='color: red;'> * </span>　　</span>" +
                "<input id='regionDataset' type='text' class='form-control' value='samples_processing_newyorkZone_R'/>" +
                "</div><p><div class='input-group'>" +
                "<span class='input-group-addon'>分析范围　　　　　</span>" +
                "<input id='query' type='text' class='form-control' value='-74.050,40.650,-73.850,40.850'/>" +
                "</div><p><p><div class='input-group'>" +
                "<span class='input-group-addon'>以标准属性字段统计</span>" +
                "<span class='form-control'>" +
                "<input id='standardSummaryFields' type='checkbox'>" +
                "</span><span class='input-group-addon'>以权重字段统计　</span>" +
                "<span class='form-control'><input id='weightedSummaryFields' type='checkbox'>" +
                "</span></div><p><div id='standardS' style='display: none'>" +
                "<div class='input-group'><span class='input-group-addon'>属性字段统计模式<span title='必填字段' style='color: red;'> * </span>　</span>" +
                "<input id='standardStatisticModes' type='text' class='form-control' value='max'/>" +
                "</div><p><div class='input-group'>" +
                "<span class='input-group-addon'>属性字段名<span title='必填字段' style='color: red;'> * </span>　　　　</span>" +
                "<input id='standardFields' type='text' class='form-control' value='LocationID'/>" +
                "</div><p></div><div id='weightS' style='display: none'>" +
                "<div class='input-group'><span class='input-group-addon'>权重字段统计模式<span title='必填字段' style='color: red;'> * </span>　</span>" +
                "<input id='weightedStatisticModes' type='text' class='form-control' value='max'/>" +
                "</div><p><div class='input-group'><span class='input-group-addon'>权重字段名<span title='必填字段' style='color: red;'> * </span>　　　　</span>" +
                "<input id='weightedFields' type='text' class='form-control' value='LocationID'/>" +
                "</div><p></div><div id='resolutionS' class='input-group'>" +
                "<span class='input-group-addon'>网格大小　　　　　</span>" +
                "<input id='resolution' type='text' class='form-control' value='100'/>" +
                "</div><p><div id='meshSizeUnitS' class='input-group'><span class='input-group-addon'>网格大小单位　　　</span>" +
                "<select class='form-control' id='meshSizeUnit' name='clientType'>" +
                "<option value='Meter' selected='selected'>Meter</option>" +
                "<option value='Kilometer'>Kilometer</option>" +
                "<option value='Yard'>Yard</option>" +
                "<option value='Foot'>Foot</option>" +
                "<option value='Mile'>Mile</option>" +
                "</select></div><p><div class='input-group'>" +
                "<span class='input-group-addon'>是否统计长度或面积</span>" +
                "<span class='form-control'><input id='sumShape' type='checkbox' checked>" +
                "</span></div><p><div align='right'>" +
                "<input type='button' id='btn' class='btn btn-primary' value='创建'/></div></div>"
        handleMapEvent(popup, this._map);
        return popup;
    };
    info.addTo(map);

    $("#standardSummaryFields").change(function (e) {
        if (e.target.checked) {
            $("#standardS").show();
            return;
        }
        $("#standardS").hide();
    });
    $("#weightedSummaryFields").change(function (e) {
        if (e.target.checked) {
            $("#weightS").show();
            return;
        }
        $("#weightS").hide();
    });
    $("#type").change(function (e) {
        if (e.target.selectedIndex === 0) {
            $("#meshTypeS").show();
            $("#resolutionS").show();
            $("#meshSizeUnitS").show();
            $("#regionDatasetS").hide();
            return;
        }
        $("#meshTypeS").hide();
        $("#resolutionS").hide();
        $("#meshSizeUnitS").hide();
        $("#regionDatasetS").show();
    });
    var processingService = new L.supermap.processingService(processingUrl);
    if (!window.isLocal) {
        SuperMap.SecurityManager.registerToken('http://117.122.248.69:8090/iserver', token);
    }


    function getQuery() {
        if ($('#query').val() === "") {
            return "";
        }
        var query = [];
        $('#query').val().split(',').map(function (el) {
            query.push(parseFloat(el));
        });
        return L.latLngBounds(L.latLng(query[1], query[0]), L.latLng(query[3], query[2]));
    }

    $('#btn').on('click', function () {
        if ($('#msg_container')[0]) {
            $('#msg_container').remove();
        }
        showLoader();
        if (map && layer) {
            map.removeLayer(layer);
        }
        var summaryRegionJobParameter = new SuperMap.SummaryRegionJobParameter({
            datasetName: $('#datasetName').val(),
            regionDataset: $('#regionDataset').val(),
            type: $('#type option:selected').attr('value'),
            meshType: $('#meshType option:selected').attr('value'),
            query: getQuery(),
            standardSummaryFields: $('#standardSummaryFields').get(0).checked,
            weightedSummaryFields: $('#weightedSummaryFields').get(0).checked,
            standardStatisticModes: $('#standardStatisticModes').val(),
            standardFields: $('#standardFields').val(),
            weightedStatisticModes: $('#weightedStatisticModes').val(),
            weightedFields: $('#weightedFields').val(),
            resolution: $('#resolution').val(),
            meshSizeUnit: $('#meshSizeUnit option:selected').attr('value'),
            sumShape: $('#sumShape').get(0).checked
        });
        processingService.addSummaryRegionJob(summaryRegionJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                removeLoader();
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        layer = L.supermap.imageMapLayer(mapUrl, {noWrap: true, transparent: true});
                        layer.addTo(map);
                        removeLoader();
                    });
                }
            });
        });
    });

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
        $("#model").on('shown.bs.modal', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        $("#model").on('hidden.bs.modal', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        })
    }

    function showAlert(msg, state) {
        var className = "alert-";
        className += state ? "success" : "danger";
        if (!$('#msg_container')[0]) {
            alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                    "style='z-index:800;position: absolute;top: 20px;margin:auto;left: 40%;width:400px;display: none'>" +
                    "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                    "<strong><p id='msg'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }
</script>
</body>
</html>